<script setup lang="ts">
import { useSystemSettingStore } from "@renderer/store/pinia/systemSetting";
import { computed, ref } from "vue";

const systemSettingStore = useSystemSettingStore();
const windowSettingArr = computed(() => {
  return Object.values(systemSettingStore.windowSetting);
});
const  headers = [
    { title: '名称', key: 'part' ,sortable: false},
    { title: '窗宽', key: 'windowWidth' ,sortable: false},
    { title: '窗位', key: 'windowCenter' ,sortable: false},
    { title: 'Modality', key: 'modality',sortable: false },
    { title: '快捷键', key: 'shortcut' ,sortable: false},
    { title: '操作', key: 'actions', sortable: false, }
  ]
const edit = (item) => {
  Object.assign(customWindow.value, item)
  showCustomModal.value = true
};


const customWindow =  ref({
  part: '',
  windowWidth: 0,
  windowCenter: 0,
  shortcut: '',
})


const addWindow = () => {
  Object.assign(customWindow.value, {
    part: '',
    windowWidth: 0,
    windowCenter: 0,
    shortcut: '',
  })
  showCustomModal.value = true
}

const showCustomModal = ref<boolean>(false);

const setCustom = () => {}
</script>

<template>
  <v-row>
    <v-col class="font-weight-bold !ml-[10px] text-xl">窗宽窗位</v-col>
  </v-row>

  <v-row>
    <v-col>
      <v-data-table
        :headers="headers"
        hide-default-footer
        density="comfortable"
        :items="windowSettingArr"
      >
        <template v-slot:item.actions="{ item }">
          <div class="d-flex ga-2 justify-end">
            <v-icon
              disabled
              color="medium-emphasis"
              icon="mdi-pencil"
              size="small"
              @click="edit(item)"
            ></v-icon>
          </div>
        </template>
      </v-data-table>
      <v-divider :thickness="4"/>
      <div class="flex justify-end">
        <v-btn disabled  prepend-icon="mdi-plus" @click="addWindow">添加</v-btn>
      </div>
    </v-col>
  </v-row>


  <v-dialog
    v-model="showCustomModal"
    width="auto"
  >
    <v-card
      width="400"
    >

      <v-card-title class="d-flex justify-space-between align-center">
        <div class="text-h5 text-medium-emphasis ps-2">
          设置窗宽窗位
        </div>

        <v-btn
          icon="mdi-close"
          variant="text"
          @click="showCustomModal = false"
        ></v-btn>
      </v-card-title>

      <v-card-text>
        <v-form>
          <v-text-field
            v-model="customWindow.part"
            label="Name"
          />

          <v-number-input
            v-model="customWindow.windowWidth"
            label="Window Width"
          />

          <v-number-input
            v-model="customWindow.windowCenter"
            label="Window Center"
          />

          <v-text-field
            v-model="customWindow.shortcut"
            label="Shortcut"
          />

          <v-btn class="mt-2"
                 block
                 @click="setCustom">Submit</v-btn>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<style scoped></style>
